<template>
    <div class="module-card">
        <div class="module-header">
            <h2 class="module-title">项目进度</h2>
            <button class="text-primary text-sm hover:underline" @click="viewAllProjects">管理项目</button>
        </div>
        <div class="p-4">
            <div class="space-y-4">
                <div v-for="(project, index) in projects" :key="index">
                    <div class="flex justify-between items-center mb-1">
                        <span class="text-sm font-medium">{{ project.name }}</span>
                        <span class="text-sm">{{ project.progress }}%</span>
                    </div>
                    <div class="w-full bg-gray-100 rounded-full h-2 mb-2">
                        <div class="h-2 rounded-full" :class="project.progressClass"
                            :style="{ width: project.progress + '%' }"></div>
                    </div>
                    <div class="flex justify-between text-xs text-gray-500">
                        <span>截止日期: {{ project.deadline }}</span>
                        <span>{{ project.taskCount }} 任务</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ProjectProgress',
    props: {
        projects: {
            type: Array,
            default: () => [
                {
                    name: '产品重构项目',
                    progress: 68,
                    progressClass: 'bg-primary',
                    deadline: '2023-12-30',
                    taskCount: 24
                },
                {
                    name: '用户体验优化',
                    progress: 45,
                    progressClass: 'bg-info',
                    deadline: '2023-11-15',
                    taskCount: 18
                },
                {
                    name: '数据迁移计划',
                    progress: 92,
                    progressClass: 'bg-success',
                    deadline: '2023-10-20',
                    taskCount: 12
                }
            ]
        }
    },
    methods: {
        viewAllProjects() {
            // 查看所有项目逻辑
            this.$emit('view-all-projects');
        }
    }
}
</script>